<template>
    <div class="item">
        <img src="../../../assets/images/goods.jpg" alt="Image 1">
        <div class="description">
            <span class="name">{{ name }}</span><span class="price">￥{{ price }}</span>
        </div>
    </div>
</template>

<script>
export default {
    name:'card',
    props:['name','price'],
    setup(props){
        let name = props.name
        let price = props.price
        return {
            name,price
        }
    }
}
</script>

<style>
    .item {
        height: 150px;
        width: 140px;
    }
    img {
        display: block;
        height: 110px;
        width: 100%;
        margin: 0 auto;
        border-radius: 5px;
    }
    .description {
        text-align: center;
        margin-top: 10px;
    }
    .name {
        font-size: 16px;
    }
    .price {
        font-size: 12px;
        color: red;
    }
</style>